<template>
  <el-dialog :visible.sync="show" :title="title" width="600" show-footer>
    <template #default>
      <el-form :model="form" label-width="80px">
        <el-form-item label="选择数据" prop="selectData" :span="24">
          <olDictTag code="select_data" type="radio" :border="true" v-model="form.selectData"/>
        </el-form-item>
        <el-form-item label="选择字段" prop="selectField" :span="24">
          <vxe-grid style="width: 100%" ref='xGrid' v-bind="gridOptions"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <vxe-button @click="cancelEvent">取消</vxe-button>
      <vxe-button status="primary" @click="confirmEvent">立即导出</vxe-button>
    </template>
  </el-dialog>
</template>
<script>
import {get} from "@/utils/http/httpUtils";
import {getDateTime} from "@/utils/DateUtils";

export default {
  name: 'olDialogExcel',
  inject: ['http'],
  props: {
    title: {
      default: '导出数据'
    },
    name: {
      default: undefined
    },
    selectData: {
      default: '1'
    }
  },
  data() {
    return {
      gridOptions: {
        border: true,
        keepSource: true,
        showOverflow: true,
        loading: false,
        height: 330,
        align: 'left',
        scrollX: {enabled: true, gt: 15},
        scrollY: {enabled: true, gt: 0},
        columnConfig: {
          resizable: true
        },
        rowConfig: {
          useKey: true,
          keyField: 'id',
        },
        expandConfig: {
          labelField: 'seq'
        },
        editConfig: {
          trigger: 'click',
          mode: 'row',
          showStatus: true,
        },
        checkboxConfig: {
          labelField: 'title',
          reserve: true,
          highlight: true,
          range: true,
          checkAll: true
        },
        columns: [
          {
            type: 'checkbox',
            title: '全部字段',
            // width: 330
          },
        ],
        toolbarConfig: {},
        data: [],
        url: '/online/tableConfigColumn/queryByParentId',
      },
      show: false,
      form: {selectData: ''}
    }
  },
  methods: {
    init(id) {
      this.gridOptions.loading = true
      get(this.http, this.gridOptions.url, {id: id}, true).then(res => {
        this.gridOptions.data = res
        this.gridOptions.loading = false
      })
    },
    cancelEvent() {
      this.show = false
    },
    confirmEvent() {
      let columns = this.$refs.xGrid.getCheckboxRecords(true);
      let exportParam = {
        selectData: this.form.selectData,
        columns: columns,
        name: this.name || getDateTime(98)
      }
      this.$emit('emits', {m: 'exportData', v: {exportParam: exportParam, cancelEvent: this.cancelEvent}})
    }, open({id, selectData}) {
      this.form.selectData = selectData
      this.show= true
      this.init(id)

    }
  },
}
</script>
